<script setup lang="ts">
import Bar from '@/components/bar-chart.vue';
import Columnar from '@/components/columnar.vue';
import Ddoughnut from '@/components/3Ddoughnut.vue';
import Bubble from '@/components/bubble.vue';
import Flop from '@/components/flop.vue';
import Line from '@/components/line.vue';
import Acrossbar from '@/components/across-bar.vue';
import Area from '@/components/area.vue';
import Radar from '@/components/radar.vue';
import {
  reactive, ref, computed, toRefs, nextTick,
} from 'vue';
import { screenData } from '@/store/modules/screenData';

// 以下是新增弹出框
import { ElMessageBox } from 'element-plus';

const drawer2 = ref(false);
const direction = ref('rtl');
const radio1 = ref('Option 1');

function cancelClick() {
  drawer2.value = false;
}
function confirmClick() {
  // drawer2.value = true;
  ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
    .then(() => {
      drawer2.value = false;
    })
    .catch(() => {
      // catch error
    });
}
function drawer2click() {
  drawer2.value = true;
}
// 以上是新增弹出框

const store = screenData();

const loading = ref(false);
const props = defineProps({
  btnItem: {
    type: Boolean,
    default: false,
  },

});

// 解析
const aa = computed(() => store.componentList);

const a = ref(true);
const b = ref(false);
function Switchclick() {
  a.value = false;
  b.value = true;
  // aa.value[0].sort((a:any, b:any) => a.zIndex - b.zIndex);
  aa.value.sort((a:any, b:any) => a.id - b.id);
}

function Sortclick() {
  a.value = true;
  b.value = false;
  // aa.value[0].sort((a:any, b:any) => b.zIndex - a.zIndex);
  aa.value.sort((a:any, b:any) => b.id - a.id);
}

</script>

<template>
  <!-- 以下是新增弹出框 -->
  <el-drawer
    v-model="drawer2"
    :direction="direction"
    size="50%"
    class="popstyle"
  >
    <template #title>
      <h4>迁移至移动端</h4>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button
          type="primary"
          @click="confirmClick"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-drawer>
  <!-- 以上是新增弹出框 -->
  <div
    class="background"
    :class="{active: !props.btnItem}"
  >
    <div class="titlebox">迁移至移动端</div>

    <div class="centerbox">
      <div class="buttonstyle">
        <!-- 正序 -->
        <el-button
          type="primary"
          @click="Switchclick"
        >
          <el-icon><Switch /></el-icon>
        </el-button>
        <!-- 倒序 -->
        <el-button
          type="primary"
          @click="Sortclick"
        >
          <el-icon><Sort /></el-icon>
        </el-button>
        <el-button type="primary">
          <el-icon><ElementPlus /></el-icon>
        </el-button>
      </div>
      <!-- 手机背景盒子 -->
      <div
        class="imgfirstbox"
      >
        <!-- mobile内容1 -->
        <div
          class="echartsstyle"
          v-loading="loading"
          v-for="item in aa"
          :key="item.id"
          v-if="a"
        >
          <div v-show="item.name === 'doughnut-chart'">
            <Ddoughnut />
          </div>
          <div v-show="item.name === 'bar'">
            <Columnar />
          </div>
          <div v-show="item.name === 'flop-chart'">
            <Flop />
          </div>
          <div v-show="item.name === 'Line'">
            <Line />
          </div>
          <div v-show="item.name === 'area-chart'">
            <Area />
          </div>
          <div v-show="item.name === 'across-bar'">
            <Acrossbar />
          </div>
          <div v-show="item.name === 'bubble-chart'">
            <Bubble />
          </div>
          <div v-show="item.name === 'radar'">
            <Radar />
          </div>
          <div v-show="item.name === 'line'">
            <Line />
          </div>
        </div>
        <!-- mobile内容2 -->
        <div
          class="echartsstyle"
          v-loading="loading"
          v-for="item in aa"
          :key="item.id"
          v-if="b"
        >
          <div v-show="item.name === 'doughnut-chart'">
            <Ddoughnut />
          </div>
          <div v-show="item.name === 'bar'">
            <Columnar />
          </div>
          <div v-show="item.name === 'flop-chart'">
            <Flop />
          </div>
          <div v-show="item.name === 'Line'">
            <Line />
          </div>
          <div v-show="item.name === 'area-chart'">
            <Area />
          </div>
          <div v-show="item.name === 'across-bar'">
            <Acrossbar />
          </div>
          <div v-show="item.name === 'bubble-chart'">
            <Bubble />
          </div>
          <div v-show="item.name === 'radar'">
            <Radar />
          </div>
          <div v-show="item.name === 'line'">
            <Line />
          </div>
        </div>
      </div>

      <!-- 图片盒子 -->
      <div class="imgbox">
        <img
          class="imgstyle"
          src="https://gd-hbimg.huaban.com/d7d48386d7d872bd2ba06a2dcd39304a7e4cf17638c73-JyXunp_fw658"
        />
      </div>
    </div>
    <div class="lastbox">
      <el-button
        class="cancel"
        type="primary"
        plain
      >
        取消
      </el-button>
      <el-button
        type="primary"
        @click="drawer2click"
      >
        确认应用
      </el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .background {
    width: 328px;
    height: 100vh;
    background-color: #1e2126;
    overflow: hidden;
    transition: all .5s;
    min-width: 328px;
    &.active {
      width: 0;
      min-width: 0;
    }

    .centerbox {
      height: calc(100% - 130px);
      overflow: auto;
      position: relative;

      // 滚动条
      &::-webkit-scrollbar {
        width: 1px;
      }
      // 滚动条滑块
      &::-webkit-scrollbar-thumb {
        width: 1px;
      }

      .imgfirstbox {
        overflow: auto;
        position: absolute;
        left: 0px;
        top: 66px;
        margin-left:30px;
        width: 264px;
        height: 570px;
        border-radius: 34px;
        background-color: #152941;

        .echartsstyle {
          // outline: 1px solid red;
          // padding-left: 38px;
        }

      }

      // 滚动条
      .imgfirstbox::-webkit-scrollbar {
        width: 1px;
      }

      .imgbox {
        // position: absolute;
        margin-top:  50px;
        margin-left:  14px;
      }

      .buttonstyle {
        position: absolute;
        top: 12px;
        left: 83px;
        display: flex;
      }
    }

    .titlebox {
      width: 328px;
      height: 41px;
      background-color: #1e2126;
      border-bottom: 1px solid #404246;
      padding-left: 10px;
      line-height: 41px;
      color: #fff;
      font-weight: 300;
    }

    .lastbox {
      width: 328px;
      height: 50px;
      background-color: #1e2126;
      border-top: 1px solid #404246;
      text-align: right;
      line-height: 50px;
      padding-right: 30px;

      .cancel {
        background-color: #1e2126;
        border: 1px solid #5a9cf8;
      }
      .cancel:hover {
        background-color: #6badf9;

      }
    }
  }
  .imgstyle {
    height: 600px;
    object-fit: contain;
    // background-color: #152940;
  }
  :deep(.el-button) {
    border-radius: 1px;
    height: 26px;
    font-weight: 400;
    font-size: 13px;

  }
  :deep([data-v-aa9b1366] .el-button) {
    height: 24px;
  }

  .popstyle {
    background-color: #152941;
  }
  // :deep(.el-drawer) {
  //   :deep( --el-drawer-bg-color)

  //   background-color: #152941;
  // }
</style>
